<template>
  <div id="shopLineChart">
    <div ref="chart01" class="chart_box"></div>
    <div class="icon_checked">
      <el-checkbox-group v-model="checkedType" @change="checkedTypeFn">
        <!-- <el-checkbox label="0">无</el-checkbox>
        <el-checkbox label="1">添加商品</el-checkbox> -->
        <!--<el-checkbox label="2">讲解商品</el-checkbox>
           <el-checkbox label="3">发放福袋</el-checkbox>
          <el-checkbox label="4">发放优惠卷</el-checkbox>
        <el-checkbox label="5">发放红包</el-checkbox>-->
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
let mychart = null;
import testIcon1 from "@/assets/zhao/live/goodss.png";
// import testIcon2 from '@/assets/zhao/live/goodss.png';
import testIcon3 from "@/assets/zhao/live/fudai.png";
import testIcon4 from "@/assets/zhao/live/discount.png";
import testIcon5 from "@/assets/zhao/live/redpacket.png";
export default {
  name: "liveLine",
  components: {},
  props: {
    xData: Array | Object,
    series1: Array | Object,
    series2: Array | Object,
    series3: Array | Object,
    xIcons: Array | Object, //图标 icon
    name1: String,
    name2: String,
    name3: String,
  },
  // watch:{
  //     series1(a){
  //         console.log(a);
  //     },

  // },
  data() {
    return {
      checkedType: ["0"],
      iconList: [testIcon1, "", testIcon3, testIcon4, testIcon5],
    };
  },
  computed: {},
  watch: {
    series1: {
      handler(n, o) {
        this.drawLiveLine();
      },
      deep: true,
    },
    series2: {
      handler(n, o) {
        this.drawLiveLine();
      },
      deep: true,
    },
    series3: {
      handler(n, o) {
        console.log(this.series3);
        this.drawLiveLine();
      },
      deep: true,
    },
    name1: {
      handler(newVal) {
        this.drawLiveLine();
      },
      deep: true,
    },
    name2: {
      handler(newVal) {
        this.drawLiveLine();
      },
      deep: true,
    },
    name3: {
      handler(newVal) {
        console.log(this.name3);
        this.drawLiveLine();
      },
      deep: true,
    },
  },

  created() {},
  mounted() {
    if (this.xData) {
      this.$nextTick(() => {
        this.drawLiveLine();
      });
    }
  },

  methods: {
    checkedTypeFn() {
      //底部选择事件函数
      // if(!this.checkedType.length){ //如果无任何选中，默认为无
      //   this.checkedType = ['0'];
      //   alert();
      // }else if(this.checkedType.length>1){  //只能选一个

      // }
      if (!this.checkedType.length) {
        this.checkedType = ["0"];
      } else {
        this.checkedType.splice(0, 1);
      }
      // console.log(this.checkedType);
      // let iconDatas = [{value:0},{value:0},{value:0},{value:0},{},{value:0},{},{value:0},{value:0},{},{value:0},{},{value:0},{value:0},{},{value:0},{}];
      let iconDatas = this.xIcons;

      let iconObjs = [];
      if (iconDatas) {
        for (let j = 0; j < this.xData.length; j++) {
          let obj = {};
          for (let i = 0; i < iconDatas.length; i++) {
            if (iconDatas[i] == this.xData[j]) {
              obj.value = 0;
            }
          }
          iconObjs.push(obj);
        }
      }
      this.setIconFn(iconObjs); //接口请求成功，把数据处理好后调用，如果无则为空对象
    },
    setIconFn(datas) {
      let xAxis = {
        //图标配置
        symbol: `image://${testIcon1}`,
        symbolSize: "20",
        symbolOffset: [0, -10],
        type: "scatter",
        data: datas,
        tooltip: {
          //取消图标的tooltip提示
          show: false,
        },
      };
      let checkedIdx = Number(this.checkedType[0]);
      if (checkedIdx) {
        xAxis.symbol = `image://${this.iconList[checkedIdx - 1]}`;
        this.drawLiveLine(xAxis);
      } else {
        this.drawLiveLine();
      }
    },
    drawLiveLine(iconListData) {
      // console.log(this.name2)
      let that = this;
      let mychart = null;
      mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: "#e5e5e5",
            },
          },
          formatter: function (params) {
            let result01 = "";
            params.forEach(function (item) {
              result01 +=
                item.marker +
                " " +
                item.seriesName +
                " : " +
                that.format_num(item.value) +
                "</br>";
            });
            return params[0].name + "</br>" + result01;
          },
        },
        legend: {
          icon: "rect ",
          top: 28,
          itemWidth: 20,
          itemHeight: 3,
          itemGap: 30,
          textStyle: {
            color: "#555",
          },
        },
        grid: {
          left: "90",
          right: "90",
          bottom: "80",
          containLabel: false,
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
            boundaryGap: false, //X轴起始位置靠着Y轴
            //设置网格线颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#e5e5e5"],
                width: 1,
                type: "dashed",
              },
            },
            // x轴样式
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#e5e5e5", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            axisTick: {
              show: false,
            },
            // x轴字体样式
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              margin: 14,
              show: true,
              textStyle: {
                color: "#888",
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12,
              },
            },
          },
          // /* icon 的 x 方向 */
          //   {
          //   type: "category",
          //   data: this.xIcons,
          //   boundaryGap: false, //X轴起始位置靠着Y轴
          //   //设置网格线颜色
          //   splitLine: {
          //     show: false,
          //     lineStyle: {
          //       color: ["#e5e5e5"],
          //       width: 1,
          //       type: "dashed",
          //     },
          //   },
          //   // x轴样式
          //   axisLine: {
          //     lineStyle: {
          //       type: "solid",
          //       color: "#e5e5e5", //左边线的颜色
          //       width: "1", //坐标线的宽度
          //     },
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   // x轴字体样式
          //   axisLabel: {
          //     // interval: 0,
          //     // rotate: 40,
          //     margin: 14,
          //     show: true,  //x轴文字的存在与否
          //     textStyle: {
          //       color: "#888",
          //       // fontFamily: "DINAlternate-Bold",
          //       fontSize: 12,
          //     },
          //   },
          // },
        ],
        yAxis: [
          {
            type: "value",
            name: this.name1,
            //设置网格线颜色
            nameTextStyle: {
              color: "#888",
              padding: [0, 0, 0, 45],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#e5e5e5"],
                width: 1,
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#888",
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12,
              },
              formatter: function (value) {
                return that.format_num(value);
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#e5e5e5", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
          {
            type: "value",
            name: this.name2,
            //设置网格线颜色
            nameTextStyle: {
              color: "#888",
              padding: [0, 0, 0, -55],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#e5e5e5"],
                width: 1,
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#888",
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12,
              },
              formatter: function (value) {
                return that.format_num(value);
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#e5e5e5", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
          {
            type: "value",
            name: this.name3,
            offset: 90,
            //设置网格线颜色
            nameTextStyle: {
              color: "#888",
              padding: [0, 0, 0, -55],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#e5e5e5"],
                width: 1,
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#888",
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12,
              },
              formatter: function (value) {
                console.log(value);
                return that.format_num(value);
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#e5e5e5", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "slider",
            realtime: true,
            start: 0,
            end: 100,
            // backgroundColor:"#f0935e",
            fillerColor: "#f0935e",
            height: "20",
            // border:'0',
            // borderColor:"#f0935e",
            // borderColor:"#ddd",
          },
        ],
        series: [
          {
            name: this.name1,
            type: "line",
            smooth: true, //true 为平滑曲线，false为直线
            symbol: "none", //去掉折线上的小圆点
            data: this.series1,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: "default",
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: "#FED1B4",
                      },
                      {
                        offset: 1,
                        color: "#FAFAFB",
                      },
                    ]
                  ),
                },
                color: "#fd7f2c",
                //柱子颜色
              },
            },
          },
          {
            name: this.name2 == undefined ? "" : this.name2,
            type: "line",
            smooth: true, //true 为平滑曲线，false为直线
            symbol: "none", //去掉折线上的小圆点
            yAxisIndex: 1,
            data: this.series2,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: "default",
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: "#ACCFFF",
                      },
                      {
                        offset: 1,
                        color: "#FAFAFB",
                      },
                    ]
                  ),
                },
                color: "#2781FF",
              },
            },
          },
          {
            name: this.name3 == undefined ? "" : this.name3,
            type: "line",
            smooth: true, //true 为平滑曲线，false为直线
            symbol: "none", //去掉折线上的小圆点
            yAxisIndex: 1,
            data: this.series3,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: "default",
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: "#ACCFFF",
                      },
                      {
                        offset: 1,
                        color: "#FAFAFB",
                      },
                    ]
                  ),
                },
                color: "#2781FF",
              },
            },
          },
        ],
      };
      let checkedIdx = Number(this.checkedType[0]);
      if (iconListData) {
        if (checkedIdx) {
          // let markArea =  {
          //   name: '讲解商品',
          //   type: 'line',
          //   smooth: true,
          //   zIndex:10,
          //   markArea:{
          //       itemStyle: {
          //           color: 'rgba(255, 173, 177, 0.4)'
          //       },
          //       data: [ [{
          //               name: '讲解商品',
          //               xAxis: '1623859200'
          //           }, {
          //               xAxis: '1624118400'
          //           }], [{
          //               name: '讲解商品',
          //               xAxis: '1624723200'
          //           }, {
          //               xAxis: '1624809600'
          //           }] ]
          //       }
          //   }
          //   option.series.push(markArea);
          option.series.push(iconListData);
        }
      }
      //  else {
      //   if (option.series.length > 2) {
      //     //如果大于2条折线说明有图标，则做删除操作
      //     option.series.splice(1, 2);
      //   }
      // }
      mychart.clear();
      if (!checkedIdx) {
        option.series.splice(2, 3);
        mychart.setOption(option, true); //true,每次调用都重新渲染
      } else {
        mychart.setOption(option);
      }
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#shopLineChart {
  width: 100%;
  height: calc(100% - 35px);
  // margin-top: 36px;
  .chart_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
  .icon_checked {
    text-align: center;
    .el-checkbox {
      margin-right: 25px;
    }
  }
}
</style>